<script setup>

</script>

<template>

   <el-container class="container">
    <el-aside >
        <el-col  class="aside">
            <el-menu :default-openeds="['1', '4']" router>
                <el-sub-menu index="1">
                <template #title>
                    <el-icon><location /></el-icon>
                    <span>个人中心</span>
                </template>
                    <el-menu-item index="user">用户登录</el-menu-item>
                    <el-menu-item index="1-2">一键登录</el-menu-item>
                    <el-menu-item index="1-3">认证信息</el-menu-item>
                </el-sub-menu>
                <el-menu-item index="2">
                    <el-icon><location /></el-icon>
                    <span>收货地址</span>
                </el-menu-item>
                <el-menu-item index="3">
                    <el-icon><document /></el-icon>
                    <span>车辆管理</span>
                </el-menu-item>
                <el-menu-item index="4">
                    <el-icon><setting /></el-icon>
                    <span>专线管理</span>
                </el-menu-item>
            </el-menu>
        </el-col>
    </el-aside>

    <el-main>
          <router-view></router-view>
    </el-main>
  </el-container>
</template>

<style scoped>
/* 让整体高度铺满，主内容居中 */
.container {
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    background: #f7f8fa;
}
.el-aside {
    height: 500vh;
    background-color: aliceblue;
    box-shadow: 2px 0 8px rgba(0,0,0,0.04);
}
.el-main {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    min-height: 100vh;
    padding-top: 48px;
}
.aside{
    margin: 20px;
    padding: 20px;
}
</style>